<template>
  <div class="login-container">
    <div class="login-main">
      <!-- 登录表单 -->
      <login-form
        v-if="!forget_show&&!register_show"
        @forgetShow="forgetShow"
        @registerShow="registerShow"
      />
      <!-- 找回密码表单 -->
      <forget-form v-if="forget_show" @backLogin="loginShow" />
      <!-- 注册用户表单 -->
      <register-form v-if="register_show" @backLogin="loginShow" />
    </div>
  </div>
</template>

<script>
import loginForm from "@/components/Login/loginForm.vue";
import forgetForm from "@/components/Login/forgetForm.vue";
import registerForm from "@/components/Login/registerForm.vue";
import { mapMutations, mapGetters } from "vuex";
export default {
  components: {
    loginForm,
    forgetForm,
    registerForm
  },
  data() {
    return {
      forget_show: false,
      register_show: false
    };
  },
  created() {
    //刷新恢复页面状态
    let current = JSON.parse(sessionStorage.getItem("login_current"));
    if (current) {
      this.forget_show = current.forget;
      this.register_show = current.register;
    }
  },
  watch: {
    //监听表单切换
    forget_show() {
      this.saveCurrent();
    },
    register_show() {
      this.saveCurrent();
    }
  },
  methods: {
    forgetShow() {
      this.forget_show = true;
    },
    registerShow() {
      this.register_show = true;
    },
    loginShow() {
      this.forget_show = false;
      this.register_show = false;
    },
    saveCurrent() {
      //保存登录页表单显示状态
      let login_current = {
        forget: this.forget_show,
        register: this.register_show
      };
      sessionStorage.setItem("login_current", JSON.stringify(login_current));
    }
  }
};
</script>

<style lang="scss" scoped>
.login-container {
  width: 100%;
  height: 100%;
  min-height: 700px;
  overflow: hidden;
  background: url("../assets/bg1.jpg") no-repeat;
  background-size: 100% 100%;
  .login-main {
    position: relative;
    width: 900px;
    height: 695px;
    margin: 0 auto;
  }
}
</style>